
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myhuabu" width="500" height="500"></canvas>
	    <script type="text/javascript">
	    var myhuabu = document.getElementById('myhuabu');
	    var ctx = myhuabu.getContext('2d');
        ctx.translate(250,250);
        setInterval(function(){
            ctx.clearRect(-250,-250,500,500);
     	    ctx.translate(-250,-250);
     	    mytime();
        },1000);
        function mytime(){
     	    //表盘
     	    ctx.beginPath();
     	    ctx.arc(250,250,220,0,2*Math.PI);
	        ctx.strokeStyle="orange";//画笔填充颜色
	        ctx.lineCap ='round'
	        ctx.lineWidth=10;
	        ctx.stroke();
            ctx.translate(250,250);
            for(var i=0;i<60;i++){
    	        ctx.beginPath();
                ctx.moveTo(0,-210);
                ctx.strokeStyle="black";
                if (i%5==0) {
    	            ctx.lineWidth=7;
    	            ctx.lineTo(0,-190);
                }else {
        	        ctx.lineWidth=3;
        	        ctx.lineTo(0,-200);
                }
            ctx.stroke();
            ctx.rotate(6/180*Math.PI);
            } 
            //设置数字
            ctx.font='20px 微软雅黑';
            ctx.translate(-10,8);
            for(var i=1;i<=12;i++){
                var y = Math.sin((i*30-90)/180*Math.PI)*160;
                var x = Math.cos((i*30-90)/180*Math.PI)*160;
                if (i%3==0) {
            	    ctx.fillStyle='red';
                } else{
            	    ctx.fillStyle='black';
                }
                ctx.fillText(i,x,y);
            }
            ctx.translate(10,-8);
             //中心小圆
            ctx.beginPath();
            ctx.arc(0,0,10,0,2*Math.PI)
            ctx.fillStyle='red';
            ctx.fill();
            
            //获取本地时间
            var data = new Date();//年
            var nian = data.getFullYear();//月
            var yue = data.getMonth();//日
            var ri = data.getDate(); //星期
            var xingqi = data.getDay();  //小时
            var hh = data.getHours();//分钟
            var mm = data.getMinutes();   //秒
	        var ss = data.getSeconds();
	        //设置秒针
	        ctx.beginPath();
	        ctx.moveTo(0,0);
	        var miaoy = Math.sin((ss*6-90)/180*Math.PI)*180;
	        var miaox = Math.cos((ss*6-90)/180*Math.PI)*180;
	        ctx.lineTo(miaox,miaoy);
	        ctx.strokeStyle='red'
	        ctx.stroke();
	        //设置分针
	        ctx.beginPath();
	        ctx.moveTo(0,0);
	        var feny = Math.sin((mm*6-90+ss/10)/180*Math.PI)*160;
	        var fenx = Math.cos((mm*6-90+ss/10)/180*Math.PI)*160;
	        ctx.lineTo(fenx,feny);
	        ctx.lineWidth=5;
	        ctx.strokeStyle='black'
	        ctx.stroke();
	        //设置时针
	        ctx.beginPath();
	        ctx.moveTo(0,0);
	        var shiy = Math.sin((hh*30-90+mm*0.5+ss/10)/180*Math.PI)*140;
	        var shix = Math.cos((hh*30-90+mm*0.5+ss/10)/180*Math.PI)*140;
	        ctx.lineTo(shix,shiy);
	        ctx.lineWidth=7;
	        ctx.strokeStyle='black'
	        ctx.stroke();
//	        ctx.closePath();
	    
	        //设置显示
	        ctx.beginPath();
	        ctx.fillStyle='black'
	        ctx.fillRect(-50, 90, 30, 30);
		    ctx.fillRect(-10, 90, 30, 30);
		    ctx.fillRect(30, 90, 30, 30);
		    hh = get0(hh);
		    mm = get0(mm);
		    ss = get0(ss);
            ctx.beginPath();
		    var str = nian + '年' + get0(yue+1) + '月' + get0(ri) + '日  星期' + xinqi(xingqi);
	        ctx.fillStyle = 'blue';
	        ctx.fillText(str, -100, 60);
	        ctx.fillStyle = 'white';
	        ctx.fillText(hh, -48, 112);
		    ctx.fillText(mm, -8, 112);
		    ctx.fillText(ss, 32, 112);
        }
        
        
        function get0(a) {
		    if(a < 10) {
			    a = '0' + a;
		    }
		    return a;
	    }
        
        
        function xinqi(xx) {
//      	console.log(xx)
		    switch(xx) {
		        case 1:
		        return '一';
		        break;
		        case 2:
		        return '二';
		        break;
		        case 3:
		        return '三';
		        break;
		        case 4:
		        return '四';
		        break;
		        case 5:
		        return '五';
		        break;
		        case 6:
		        return '六';
		        break;
		        case 0:
		        return '日';
		        break;
		    }
        }
	</script>
	</body>
	
</html>
